<template>
  <div class="school-home-box flex-col-start">
    <div class="school-home-body">
      <div class="flex-row-center school-home-search-box">
        <el-autocomplete
            v-model="search.value"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            class="school-home-search"
            placeholder="请输入学校名称"
            @select="handleSelect"
        >
          <template slot-scope="{ item }">
            <div>{{ item.schoolName }}</div>
          </template>
          <el-button slot="append" icon="el-icon-search" @click="searchSchool"
                     @keydown.e.enter="searchSchool"></el-button>
        </el-autocomplete>


        <!--        <Search :type="2" placeholder="请输入高校名称" class=" school-home-search"></Search>-->
      </div>
      <div class="school-home-radio-box flex-col">
<!--        地区选择-->
        <div class="school-home-radio-item flex-row-start">
          <div>地区选择</div>
          <el-radio-group v-model="province"  size="mini" @input="handleProvinceChange">
            <el-radio-button :label="item.id" v-for="(item,index) in provinceList" :key="item.id">
              {{item.name}}
            </el-radio-button>

          </el-radio-group>
        </div>
        <!--        地区选择-->
        <div class="school-home-radio-item flex-row-start">
          <div>城市选择</div>

          <el-radio-group v-model="city" size="mini" @input="handleCityChange">
            <el-radio-button v-for="(city,index) in cityList" :key="city.id" :label="city.id">
              {{ city.name }}
            </el-radio-button>

          </el-radio-group>
        </div>
      </div>
      <div class="school-home-schools">
        <SchoolCardList :page-option="schoolPage" @pageChange="handlePageChange"></SchoolCardList>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search/Search.vue";
import SchoolCardList from "@/components/school/SchoolCardList.vue";
import addressApi from "@/api/school/address";
import schoolApi from "@/api/school/school";
import {setToken} from "@/util/TokenUtil";

export default {
  name: "SchoolHome",
  components: {SchoolCardList, Search},
  data() {
    return {
      search: {
        value: "",
        searchObj: {}
      },
      province: 1,
      provinceList: [],
      city: 1,
      cityList: [],
      schoolPage: {}
    }
  },
  methods: {
    querySearch(queryString, callBack) {

      schoolApi.getSchoolListByLike(queryString).then(resp => {
        if (resp.code === 200) {

          let results = resp.data
          // 调用 callback 返回建议列表的数据
          callBack(results);
        }
      }).catch(e => {
        this.$message.error('错了哦，这是一条错误消息');
      })
    },
    searchSchool() {
      this.$router.push({
        path: `/index/animal`,
        query: {
          sid: this.search.searchObj.id
        }
      })
    },
    handleSelect(item) {
      console.log(item)
      this.search.searchObj = item
      this.search.value = item.schoolName
    },
    handleProvinceChange() {
      this.city = 1
      this.schoolPage = {}
      //TODO  此处请求城市信息
      this.getCityListByProvince(this.province)
    },
    handleCityChange() {
      //TODO  请求该城市内的高校
      this.getSchoolListByAddress(this.province, this.city, 1)
    },
    handlePageChange(page) {
      console.log(page)
      this.getSchoolListByAddress(this.province, this.city, page)
    },
    getSchoolListByAddress(pId, cId, pageNum) {
      schoolApi.getSchoolListByProvinceIdAndSchoolId(pId, cId, pageNum).then(resp => {
        if (resp.code === 200) {
          this.schoolPage = resp.data

        }
      })
    },
    getCityListByProvince(pId) {

      addressApi.getCityListByProvinceId(pId).then(resp => {
        if (resp.code === 200) {
          this.cityList = resp.data
        } else {

        }
      })
    },
    getAllProvince() {
      addressApi.getAllProvince().then(resp => {
        if (resp.code === 200) {
          this.provinceList = resp.data
        } else {

        }
      })
    }
  },
  created() {
    this.getAllProvince()
    this.getCityListByProvince(this.province)
    this.getSchoolListByAddress(this.province, this.city, 1)
    this.search.suggestSchoolList = [
      {
        schoolName: "北京大学"
      },
      {
        schoolName: "清华大学"
      },
    ]
  }
}
</script>

<style scoped lang="less">
  .school-home-box{
    width: 100%;
    height: 100%;

    background-color: #F1F2F3;
    .school-home-body{
      width: 70%;
      padding: 20px 0;
      min-height: 100vh;
      .school-home-search-box{
        height: 100px;
        .school-home-search{
          width: 60%;
          height: 40%;
        }
      }
      .school-home-radio-box{
        color: grey;
        font-size: 14px;
        align-items: flex-start;
        justify-content: center;
        min-height: 10vh;
        background-color: #e7e7e7;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 10px;
        .school-home-radio-item{
          margin: 10px 0;
          div{
            margin-right: 20px;
          }
        }
      }
      .school-home-schools{
        height: 100%;

        border-radius: 5px;
        background-color: white;
      }
    }

  }
</style>